```html
<script setup lang="ts">
  import * as tour from "@zag-js/tour"
  import { useMachine, normalizeProps } from "@zag-js/vue"
  import { useId, computed, Teleport } from "vue"

  const steps: tour.StepDetails[] = [
    {
      type: "dialog",
      id: "start",
      title: "Ready to go for a ride",
      description:
        "Let's take the tour component for a ride and have some fun!",
      actions: [{ label: "Let's go!", action: "next" }],
    },
    {
      type: "dialog",
      id: "logic",
      title: "Statechart",
      description: `As an engineer, you'll learn about the internal statechart that powers the tour.`,
      actions: [
        { label: "Prev", action: "prev" },
        { label: "Next", action: "next" },
      ],
    },
    {
      type: "dialog",
      id: "end",
      title: "Amazing! You got to the end",
      description:
        "Like what you see? Now go ahead and use it in your project.",
      actions: [{ label: "Finish", action: "dismiss" }],
    },
  ]

  const service = useMachine(tour.machine, { id: useId(), steps })

  const api = computed(() => tour.connect(service, normalizeProps))
  const open = computed(() => api.value.open && api.value.step)
</script>

<template>
  <div>
    <button @click="api.start()">Start Tour</button>
    <div id="step-1">Step 1</div>
  </div>

  <Teleport to="body" v-if="open">
    <div v-if="api.step?.backdrop" v-bind="api.getBackdropProps()" />
    <div v-bind="api.getSpotlightProps()" />
    <div v-bind="api.getPositionerProps()">
      <div v-bind="api.getContentProps()">
        <div v-if="api.step?.arrow" v-bind="api.getArrowProps()">
          <div v-bind="api.getArrowTipProps()" />
        </div>

        <p v-bind="api.getTitleProps()">{{ api.step?.title }}</p>
        <div v-bind="api.getDescriptionProps()">
          {{ api.step?.description }}
        </div>
        <div v-bind="api.getProgressTextProps()">
          {{ api.getProgressText() }}
        </div>

        <div v-if="api.step?.actions" class="tour button__group">
          <button
            v-for="action in api.step?.actions"
            :key="action.label"
            v-bind="api.getActionTriggerProps({ action })"
          >
            {{ action.label }}
          </button>
        </div>

        <button v-bind="api.getCloseTriggerProps()">X</button>
      </div>
    </div>
  </Teleport>
</template>
```
